Anexar objetos ao cursor
Agora vou mostrar como vincular um arquivo de imagem ao cursor de modo que, ao
movimentar o cursor, o arquivo de imagem o acompanhará. O arquivo que vou usar
como exemplo é o regua.gif
PRIMEIRO:
Insira o script JavaScript (à baixo) entre as tags <HEAD>...</HEAD>
do arquivo onde o efeito deve acontecer.
|
|
Você
pode modificar a distância entre o a imagem e o cursor modificando o
valor das linhas, como mostra em destaque no exemplo abaixo:
trail.style.left=event.clientX-200
trail.style.top=event.clientY-25
-200
é a distância vertical que imagem deve ficar em relação ao cursor e -25
é a distância horizontal que a imagem deve ficar em relação ao cursor
Obs.: + e - só são utilizados ser o valor for diferente de zero caso
contrario fica assim;
trail.style.left=event.clientX
trail.style.top=event.clientY |
SEGUNDO:
Neste mesmo arquivo acrescente entre os demais parâmetros da tag BODY o parâmetro
onmousemove="cursor()". Então a BODY
do arquivo ficará mais ou menos assim:
<BODY onmousemove="cursor()">
TERCEIRO:
E por último insira em qualquer lugar do arquivo (de preferência quase no
fim, antes de </BODY>) a chamada para o arquivo regua.gif, que irá
seguir o cursor incansavelmente.
<IMG id=trail
style="VISIBILITY: hidden" src="imagens/regua.gif" width="400"
height="21">
Repare que configurei WIDTH="400"
HEIGHT="21" exatamente com o tamanho do arquivo.
Com as configurações do exemplo acima deve ficar
assim:
Uma opinião minha: O webmaster deve tomar cuidado ao usar este tipo de
efeito para incrementar sua HP porque ele pode acabar torrando a paciência
do internauta que ao movimentar o cursor tem esse objeto atrapalhando ou
distraindo sua atenção.
Quando o mouse passar sobre algum link seu cursor vai manter sua forma
normal caso queira que ele adquira a forma tradicional ao passar sobre o
link coloque o código STYLE="cursor:
hand" dentro da marca <A
HREF> de cada link que ficaria mais
assim: <A HREF="link"
STYLE="cursor: hand">texto do link</A>